<template>
	<view class="register-page">

		<view class="form-container">
			<view class="form-header">
				<view class="expo-title">CNF长三角国际消防产业博览会</view>
				<view class="expo-time">2025/05/28 - 2025/05/30</view>
			</view>

			<view class="form-section">
				<view class="section-title">基本信息</view>
				<view class="form-item">
					<text class="label">姓名</text>
					<input class="input" v-model="formData.name" placeholder="请输入您的姓名" />
				</view>
				<view class="form-item">
					<text class="label">手机号</text>
					<input class="input" v-model="formData.phone" placeholder="请输入您的手机号" type="number" maxlength="11" />
				</view>
				<view class="form-item">
					<text class="label">公司/单位</text>
					<input class="input" v-model="formData.company" placeholder="请输入您的公司或单位名称" />
				</view>
			</view>

			<view class="form-section">
				<view class="section-title">参观信息</view>
				<view class="form-item">
					<text class="label">参观日期</text>
					<picker mode="date" :value="formData.visitDate" :start="'2025-05-28'" :end="'2025-05-30'"
						@change="onDateChange" class="picker">
						<view class="picker-text">{{ formData.visitDate || '请选择参观日期' }}</view>
					</picker>
				</view>
				<view class="form-item">
					<text class="label">参观人数</text>
					<picker mode="selector" :range="visitorCountOptions" :value="visitorCountIndex"
						@change="onVisitorCountChange" class="picker">
						<view class="picker-text">{{ formData.visitorCount ? formData.visitorCount + '人' : '请选择参观人数' }}
						</view>
					</picker>
				</view>
			</view>

			<!-- 移除整个协议区块 -->
			<button 
			        class="submit-btn" 
			        type="primary" 
			        @click="submitForm" 
			        :disabled="isLoading"
			        :loading="isLoading">
			        提交报名
			    </button>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, reactive, onMounted } from 'vue';
	// 添加加载状态
	const isLoading = ref(false);
	const formData = reactive({
		name: '',
		phone: '',
		company: '',
		position: '',
		visitDate: '2025-05-28', // 默认设置为5月28日
		visitorCount: ''
		// 移除agreement字段
	});

	// 页面加载时自动填充用户信息
	onMounted(() => {
		const userInfo = uni.getStorageSync('userInfo');
		if (userInfo) {
			formData.name = userInfo.nickName || '';
			// 可以从云函数获取已存储的手机号
			const token = uni.getStorageSync('token');
			if (token) {
				uniCloud.callFunction({
					name: 'expo-register',
					data: {
						action: 'getUserInfo',
						token: token
					}
				}).then(res => {
					if (res.result.code === 0 && res.result.data.phone) {
						formData.phone = res.result.data.phone;
					}
				});
			}
		}
	});

	// 参观人数选项
	const visitorCountOptions = ['1人', '2人', '3人', '4人', '5人', '5人以上'];
	const visitorCountIndex = ref(0);

	// 日期选择
	const onDateChange = (e : any) => {
		const selectedDate = new Date(e.detail.value);
		const day = selectedDate.getDate();

		// 强制选择28-30号
		if (day < 28 || day > 30) {
			uni.showToast({
				title: '请选择28-30号',
				icon: 'none'
			});
			return;
		}

		formData.visitDate = e.detail.value;
	};

	// 参观人数选择
	const onVisitorCountChange = (e : any) => {
		visitorCountIndex.value = e.detail.value;
		formData.visitorCount = visitorCountOptions[e.detail.value].replace('人', '');
	};

	// 协议勾选
	const onAgreementChange = (e : any) => {
		formData.agreement = e.detail.value.length > 0;
	};

	// 返回上一页
	const goBack = () => {
		uni.navigateBack();
	};

	// 表单验证
	const validateForm = () => {
		if (!formData.name) {
			uni.showToast({
				title: '请输入姓名',
				icon: 'none'
			});
			return false;
		}
		if (!formData.phone) {
			uni.showToast({
				title: '请输入手机号',
				icon: 'none'
			});
			return false;
		}
		if (!/^1\d{10}$/.test(formData.phone)) {
			uni.showToast({
				title: '手机号格式不正确',
				icon: 'none'
			});
			return false;
		}
		if (!formData.company) {
			uni.showToast({
				title: '请输入公司/单位',
				icon: 'none'
			});
			return false;
		}
		if (!formData.visitDate) {
			uni.showToast({
				title: '请选择参观日期',
				icon: 'none'
			});
			return false;
		}
		if (!formData.visitorCount) {
			uni.showToast({
				title: '请选择参观人数',
				icon: 'none'
			});
			return false;
		}
		// 移除协议验证
		return true;
	};

	// 提交表单
	const submitForm = async () => {
		if (isLoading.value) return;
		if (!validateForm()) return;

		isLoading.value = true;
		uni.showLoading({
			title: '提交中...',
			mask: true
		});

		try {
			// 获取存储的token
			const token = uni.getStorageSync('token');

			// 调用云函数提交报名信息
			const result = await uniCloud.callFunction({
				name: 'expo-register',
				data: {
					action: 'submit',
					params: formData,
					token: token // 传递token
				}
			});

			uni.hideLoading();

			if (result.result.code === 0) {
				uni.showToast({
					title: '报名成功',
					icon: 'success'
				});

				// 延迟返回首页
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			} else {
				uni.showToast({
					title: result.result.message,
					icon: 'erro'
				});
			}
		} catch (error) {
			uni.hideLoading();
			uni.showToast({
				title: '报名失败，请重试',
				icon: 'none'
			});
			console.error('报名失败', error);
		} finally {
			isLoading.value = false;
			uni.hideLoading();
		}
	};
</script>

<style>
	.register-page {
		min-height: 100vh;
		background-color: #f8f8f8;
		display: flex;
		flex-direction: column;
	}

	.form-container {
		flex: 1;
		padding: 24rpx;
	}

	.form-header {
		background: linear-gradient(135deg, #e53935, #c62828);
		border-radius: 16rpx;
		padding: 32rpx;
		margin-bottom: 24rpx;
		color: white;
	}

	.expo-title {
		font-size: 18px;
		font-weight: 600;
		margin-bottom: 16rpx;
	}

	.expo-time {
		font-size: 14px;
		opacity: 0.9;
	}

	.form-section {
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 24rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.section-title {
		font-size: 16px;
		font-weight: 500;
		color: #333333;
		margin-bottom: 24rpx;
		padding-bottom: 12rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.form-item {
		margin-bottom: 32rpx;
	}

	.label {
		display: block;
		font-size: 14px;
		color: #666;
		margin-bottom: 12rpx;
		font-weight: 500;
	}

	.input {
		width: 100%;
		height: 96rpx;
		background-color: #f9f9f9;
		border-radius: 12rpx;
		padding: 0 24rpx;
		font-size: 15px;
		color: #333;
		border: 1rpx solid #eee;
		transition: all 0.2s;
		box-sizing: border-box;
		/* 新增 */
	}

	.picker {
		width: 100%;
		height: 96rpx;
		background-color: #f9f9f9;
		border-radius: 12rpx;
		padding: 0 24rpx;
		display: flex;
		align-items: center;
		border: 1rpx solid #eee;
		box-sizing: border-box;
		/* 新增 */
	}

	/* 修改表单区块内边距 */
	.form-section {
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 24rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
		overflow: hidden;
		/* 新增 */
	}

	.input:focus {
		border-color: #e53935;
		background-color: #fff;
	}

	.picker-text {
		font-size: 15px;
		color: #333;
	}

	/* 可以移除以下协议相关样式 */
	/* .agreement {
		margin: 32rpx 0;
		padding: 0 12rpx;
	}

	.agreement-text {
		font-size: 13px;
		color: #666;
	}

	.link {
		color: #e53935;
	} */

	.submit-btn {
		width: 100% !important;
		height: 96rpx;
		line-height: 96rpx;
		font-size: 16px;
		font-weight: 500;
		border-radius: 48rpx;
		background-color: #e53935 !important;
		margin-top: 16rpx;
		box-shadow: 0 4rpx 16rpx rgba(229, 57, 53, 0.3);
		transition: all 0.2s;
	}

	.submit-btn[disabled] {
		background-color: #cccccc !important;
		color: #ffffff !important;
		box-shadow: none;
	}

	.submit-btn:active {
		transform: translateY(2rpx);
	}
</style>